<template>
    <div>
        <!-- 任务管理器 -->
        <SonTest101></SonTest101>

        <!-- 用户反馈表单 -->
        <sonTest102></sonTest102>

        <h2>留言板</h2>

        <!-- 留言输入表单 -->
        <div>
            <label for="message">输入留言：</label>
            <textarea v-model="text" id="message" placeholder="请输入留言..."></textarea>
            <p>剩余字符：{{ remaining }}</p>
            <button @click="transmit">提交留言</button>
        </div>

        <!-- 留言列表 -->
        <ul>
            <!-- 留言条目 -->
            <li>
                <MessageItem v-for="(message,index) in messages" :key="index" @del="deltext">
                    <!-- 自定义留言显示的插槽 -->
                    <template v-slot:default>
                        <!-- <template v-slot:default="{ message }"> -->
                        <span>{{ message }}</span>
                    </template>
                </MessageItem>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import SonTest101 from './components/sonTest101.vue';

import sonTest102 from './components/sonTest102.vue';

import { ref, computed, watch, reactive } from 'vue';
import MessageItem from './components/MessageItem.vue';

// + 表单输入绑定：通过 textarea 绑定留言输入内容。
const text = ref<string>('')

// + 传参Props：父组件将留言内容作为 props 传递给子组件。
const messages= ref<string[]>([])

function transmit() {
    messages.value.push(text.value)
}

// + 侦听器：监听 textarea 的输入变化，计算并显示剩余字符数。
// 字符计数：使用计算属性显示反馈详情中可输入字符的剩余数量，并在 textarea 中实时更新。
const charCount = computed(() => {
    return text.value.length
})

const remaining = ref(100)

watch(text, () => {
    remaining.value = 100 - charCount.value
    const c = text.value
    if (charCount.value >= 100) {
        text.value = c.slice(0, 100);
        alert("最多可输入100字")
    }
})

// + 事件 emit：子组件通过 emit 向父组件发送删除留言事件。
function deltext(index:number) {
   messages.value.splice(index,1)
}
// + 插槽：允许父组件通过 slot 自定义留言的显示方式。
// + defineExpose：允许父组件通过 defineExpose 调用子组件内部的方法或数据，扩展灵活性。


</script>

<style scoped>
/* 父组件 MessageBoard 样式 */
div {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

textarea {
    width: 100%;
    height: 100px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
}

button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #218838;
}

p {
    margin-top: 0;
    font-size: 0.9em;
    color: #888;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}
</style>